<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: auto;
        }
        #view {
            height: 100vh;
            overflow-y: auto;
        }
        #top, #middle, #bottom {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2em;
        }

        #middle {
            overflow-x: hidden;
            position: relative;
        }
        #middle #middleScroll {
            width:100%;
            white-space: nowrap;
            line-height: 100vh;
        }

        #middleScroll span {
            position: absolute;
            top: 0;
            transition: 0.3s;
        }

    </style>
</head>
<body>
<div id="view">
    <div id="top" style="background-color: #e74c3c;">Top Content</div>
    <div id="middle" style="background-color: #3498db;">
        <div id="middleScroll">
            <span id="span" :style="{transform: translate(0,0)}">
                Middle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle ContentMiddle Content
            </span>
        </div>
    </div>
    <div id="bottom" style="background-color: #2ecc71;">Bottom Content</div>
</div>

</body>
<script src="main.js">

</script>

</html>
